<!DOCTYPE html>
<html lang="en">
	<head>
		<title>测试</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				font-family: Monospace;
				background-color: #f0f0f0;
				margin: 0px;
				overflow: hidden;
				color: purple;
			}

			a {
				color: red;
			}
		</style>
	</head>
	<body>
		<script type="text/javascript" src="jsc3d/jsc3d.js"></script>
		<script type="text/javascript" src="jsc3d/jsc3d.webgl.js"></script>
		<script type="text/javascript" src="jsc3d/jsc3d.touch.js"></script>
		
		<div style="position: absolute; top: 10px; width: 100%; text-align: center; ">
			<a href="" target="_blank"></a>测试页面<br>
				<div id="icon"> </div>
			视口选择: <a href="#" onclick="updateView(0);return false;">上视图</a> |
				<a href="#" onclick="updateView(1);return false;">下视图</a> |
				<a href="#" onclick="updateView(2);return false;">左视图</a> |
				<a href="#" onclick="updateView(3);return false;">右视图</a> |
				<a href="#" onclick="updateView(4);return false;">前视图</a> |
				<a href="#" onclick="updateView(5);return false;">后视图</a> |
				<a href="#" onclick="updateView(6);return false;">轴侧视图</a>
				<br/>
			<div id="fov"></div>
			<canvas id="cv" style="border: 1px solid;" width="600" height="600" ></canvas>
		</div>

		<script type="text/javascript">
		var canvas = document.getElementById('cv');
		var dSize = window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight;
		canvas.width = dSize;
		canvas.height = dSize;
		
		var viewer = new JSC3D.Viewer(canvas);
		viewer.setParameter('SceneUrl', 'jsc3d/models/duct.stl');
		viewer.setParameter('InitRotationZ', 0);
		viewer.setParameter('ModelColor', '#CAA618');
		viewer.setParameter('BackgroundColor1', '#FFFFFF');
		viewer.setParameter('BackgroundColor2', '#383840');
		viewer.setParameter('RenderMode', 'textureflat');
		//viewer.setParameter('RenderMode', 'wireframe');
		
		viewer.setParameter('ModelColor', '#708090');
		viewer.setParameter('BackgroundColor1', '#A1A1B8');
		viewer.setParameter('BackgroundColor2', '#737397');
		viewer.setParameter('RenderMode', 'smooth');
		viewer.setParameter('Definition', 'standard');
		//viewer.setParameter('Definition', 'high');
		viewer.setParameter('FaceCulling', 'off');
		viewer.setParameter('CreaseAngle', '20');	
		viewer.setParameter('MipMapping', 'on');
		viewer.setParameter('Renderer', 'webgl');
		viewer.init();
		//viewer.setMouseUsage('pan');
		viewer.update();
		

		// Add a bounding box immediately after the scene has been loaded.
		viewer.onloadingcomplete = function() {
			var scene = viewer.getScene();
			if(!scene)
				return;

			makeBoundingBox(scene, 0xffffff);
			viewer.rotate(-90, 0, 0);
			viewer.rotate(0, 25, 0);
			viewer.rotate(25, 0, 0);
			viewer.update();
		};

		window.addEventListener("resize", function(){
			var dSize = window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight;
			canvas.width = dSize;
			canvas.height = dSize;
			viewer.update();
		});
		
		/*
		 * Create and add bounding box of the scene.
		 */
		function makeBoundingBox(scene, color) {
			var bbox = new JSC3D.Mesh('bbox');
			bbox.vertexBuffer = [ 
				scene.aabb.minX, scene.aabb.minY, scene.aabb.minZ, 
				scene.aabb.maxX, scene.aabb.minY, scene.aabb.minZ, 
				scene.aabb.maxX, scene.aabb.maxY, scene.aabb.minZ, 
				scene.aabb.minX, scene.aabb.maxY, scene.aabb.minZ, 
				scene.aabb.minX, scene.aabb.minY, scene.aabb.maxZ, 
				scene.aabb.maxX, scene.aabb.minY, scene.aabb.maxZ, 
				scene.aabb.maxX, scene.aabb.maxY, scene.aabb.maxZ, 
				scene.aabb.minX, scene.aabb.maxY, scene.aabb.maxZ, 
			];
			bbox.indexBuffer = [ 
				0, 3, 2, 1, -1, 
				0, 4, 7, 3, -1, 
				3, 7, 6, 2, -1, 
				0, 1, 5, 4, -1, 
				5, 1, 2, 6, -1, 
				4, 5, 6, 7, -1 
			];
			bbox.isDoubleSided = true;
			bbox.init();

			bbox.setRenderMode('wireframe');
			bbox.setMaterial(new JSC3D.Material('bbox-mat', 0, color, 0));

			scene.addChild(bbox);
		}

		//view type: 0:top; 1:bottom; 2:left; 3:right; 4:front; 5:back; 6:iso
		function updateView( viewtype ) {
			viewer.resetScene();
			if (viewtype == 0) {
				viewer.resetScene();
			}	
			else if (viewtype == 1) {
				viewer.rotate(180, 0, 0);
			}
			else if (viewtype == 2) {
				viewer.rotate(-90, -90, 0);
			}
			else if (viewtype == 3) {
				viewer.rotate(-90, 90, 0);
			}
			else if (viewtype == 4) {
				viewer.rotate(-90, 0, 0);
			}
			else if (viewtype == 5) {
				viewer.rotate(-90, 180, 0);
				viewer.setMouseUsage('pan');
				viewer.isTouchHeld = true;
				 canvas.addEventListener("mouseup", function(event){
				 	viewer.setMouseUsage('default');
				 });
			}
			else if (viewtype == 6) {
				viewer.suppressDraggingRotation = true;
				//viewer.replaceSceneFromUrl('jsc3d/models/fan.stl');
				viewer.rotate(-90, 0, 0);
				viewer.rotate(0, 25, 0);
				viewer.rotate(25, 0, 0);
			}
			viewer.update();

			//document.getElementById('fov').innerHTML = 'Converted ' + lens + 'mm lens to FOV '+ fov.toFixed(2) +'&deg;' ;

		}
		
  </script>
	</body>
</html>
